<template>
	<view>
		<!-- 登陆表单 -->
		<view class='registercls_box'>
	
			<form>
				<view class='input_all'>
					<input placeholder='手机号码' type='number' v-model="phone"></input>
					<view class=""  style="overflow: hidden;">
						<input placeholder='验证码' style="width: 200upx;float: left;" type='number' v-model="msg_code"  ></input>
						<button @click="get_msg_code" type="default" :disabled="!can_click" class="get_msg_code" >{{get_msg_btn_text}}</button>
					</view>
					<button class="_submit" @tap="submit_form">登录</button>
		
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				 
				get_msg_btn_text:'获取验证码',
				can_click:true,
				msg_code:''

			}
		},
		methods:{
			get_msg_code(){
				console.log(this.phone)
				if(!this.phone){
					this.$alert("请输入手机号码");
					return
				}
				this.$ajax.get_msg_code(this.phone).then(res=>{
					if(res.code==200){
						this.$alert("验证码已发送");
						this.can_click = false;
						let time = 60;
						let timer = setInterval(()=>{
							this.get_msg_btn_text = "重新获取"+time;
							time--;
							if(time == 0 ){
								this.get_msg_btn_text = "获取验证码";
								this.can_click = true;
								clearInterval(timer)
							}
						},1000)
					}else{
						this.$alert(res.msg)
					}
				})
			},
			submit_form(){
				if(!this.msg_code){
					this.$alert("请填写短信验证码");
					return
				}
				let data = {
					phone:this.phone,
					code:this.msg_code
				}
				this.$ajax.post({url:"/Login/phoneLogin",data}).then(res=>{
					if(res.code==200){
						this.$alert("登录成功");
						uni.setStorageSync("token",res.data.access_token)
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/user/personal/personal"
							})
						},800)
					}else{
						this.$alert(res.msg)
					}
				})
			}
			
		}
		 
	}
</script>

<style scoped="true">
	/* pages/login/login.wxss */
	.registercls_box{
		width: 100%;
		height: 100vh;
		background-color: #f1f1f1;
	}
	.get_msg_code{
		width: 240upx;
		float: right;
		font-size: 26upx;
		margin:30upx 0;
		height:86upx;
		line-height:86upx;
		background: #fff;
		color: #656565;
	}
	.registercls_top {
		height: 440upx;
		width: 100%;
	}

	.registercls_top image {
		height: 100%;
		width: 100%;
	}

	.input_all {
		padding: 105upx 107upx 0;
	}

	.input_all input {
		background: #fff;
		border-radius: 10upx;
		margin: 30upx 0;
		line-height: 86upx;
		height: 86upx;
		display: block;
		padding: 0 30upx;
		color: #000;
		font-size:32upx;
		box-shadow: 3upx 5upx 8upx #eaeaea;
	}

	.input_all .forget {
		text-align: right;
		color: #000;
		font-size: 24upx;
	}

	.input_all button._submit {
		background: #fff;
		color: #656565;
		line-height: 87upx;
		height: 87upx;
		box-shadow: 3upx 5upx 8upx #d8d8d8;
		
		font-size: 36upx;
		margin-top: 60upx;
	}

	.sign {
		line-height: 80upx;
	}
</style>
